<template>
	<view class="news">
		<tabTopBar :bgColor="'#132034'">
			<view class="tabs">
				<view v-for="(item, index) in tabs" :key="index" class="tabs-item"
					:class="{ 'tabs-item__active':activeIndex === index }" @tap="handleTypeChange(index)">
					<text class="tabs-item__text">{{ $t(item.name) }}</text>
				</view>
			</view>
		</tabTopBar>
		<view class="news-list">
			<view v-for="item in dataList" :key="item.id" class="news-item"
				@tap="$u.route('/pages/news/detail?id=' + item.id)">
				<view class="news-item__cover">
					<image :src="item.backgroundImage" mode="aspectFill"></image>
				</view>
				<view class="news-item__title">
					<text>{{ item.title }}</text>
				</view>
			</view>
			<empty v-if="isEmpty"></empty>
			<up-loadmore v-else marginTop="24" :status="loadMoreStatus" :nomore-text="$t('network.noDataOfMore')"
				:loading-text="$t('common.loadingText')" color="#9e9e9e" lineColor="#9e9e9e" dashed
				:line="loadMoreStatus == 'nomore'" />
		</view>
		<tabBar></tabBar>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import useRefreshablePagination from "@/composable/hooks/useRefreshablePagination.js";
	import {
		getNewsList
	} from "../../apis/components/news";

	// 创建响应式数据
	const tabs = reactive([{
			name: "news.type-1",
			value: 1
		},
		{
			name: "news.type-2",
			value: 2
		},
		{
			name: "news.type-3",
			value: 3
		},
	]);
	const activeIndex = ref(0);

	const handleTypeChange = (index) => {
		activeIndex.value = index;
		refresh();
	}

	const fetchData = async (page, pageSize) => {
		const type = tabs[activeIndex.value].value;
		const {
			records
		} = await getNewsList(type, page, pageSize);
		return {
			data: records || []
		};
	};
	const {
		dataList,
		refresh,
		loadMoreStatus,
		isEmpty
	} = useRefreshablePagination(fetchData);
</script>

<style lang="scss">
	.news-list {
		padding: 24rpx 32rpx;
	}

	.tabs {
		width: 100%;
		box-sizing: border-box;
		@include flex(row);

		&-item {
			flex: 1;
			text-align: center;
			color: #DDDDDD;

			&__text {
				// font-family: PingFangSC;
				font-size: 32rpx;
				line-height: 1;
			}

			&__active {
				color: #64B7F6;
			}
		}
	}

	.news-item {
		border-radius: 16rpx;
		padding: 24rpx;
		background-color: #132034;

		&:not(:last-child) {
			margin-bottom: 24rpx;
		}

		&__cover {
			padding-top: 46.708%;
			position: relative;
			border-radius: 16rpx;
			overflow: hidden;

			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		&__title {
			margin-top: 24rpx;

			text {
				// font-family: PingFangSC;
				font-size: 30rpx;
				letter-spacing: -0.0747em;
				color: #dddddd;
			}
		}
	}
</style>